<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>试卷批改</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <style>
        body {
            background-color: #333;
            margin: 0;
        }
        #app {
            background-color: #ccc;
            margin: 0 auto;

            max-width: 900px;
            min-width: 600px;
        }
        hr {
            margin: 5px 0;
        }

        .stu-info {
            background-color: #eee;
            padding: 10px 20px;
            font-size: 22px;
            display: flex;
            margin-bottom: 10px;
            position: sticky;
            top: 0;
        }
        .stu-info .item {
            padding: 0 20px;
        }

        .question {
            background-color: white;
            padding: 20px 20px;
        }
        .description {
            font-size: 18px;
        }
        .description .q-title {
            color: white;
            background-color: #5d9cec;
            border-radius: 5px;
            padding: 2px 10px;
            font-size: 18px;
        }
        .description .q-txt {
            margin: 5px 0;
            border: 1px solid #ccc;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .answer {

        }
        .answer .a-tip {
            padding-bottom: 10px;
            color: #b70404;
        }
        .answer .a-tip .a-title {
            display: inline-block;
            color: white;
            background-color: #5d9cec;
            border-radius: 5px;
            padding: 2px 10px;
            font-size: 18px;
            cursor: pointer;
        }
        .answer .a-tip .stu-answer {
            display: inline-block;
            margin: 0 10px;
        }
        .answer .a-tip .stu-answer:after {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 0;
            vertical-align: bottom;
        }
        .answer .a-tip .correct-answer {
            display: inline-block;
        }
        .answer .a-tip .correct-answer:after {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #beecbe;
            vertical-align: bottom;
        }
        .answer .a-tip .stu-score {
            padding: 5px;
            float: right;
            font-weight: bold;
            font-size: 16px;
        }
        .bg-correct {
            background-color: #beecbe;
        }
        .answer .a-list .a-item {
            padding: 5px 10px;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        /*非选择题*/
        .answer .q-txt {
            margin: 5px 0;
            border: 1px solid #ccc;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            letter-spacing: 1px;
            font-size: 16px;
        }

        .checkbox-unchecked:before {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 -25px;
            vertical-align: bottom;
        }

        .checkbox-checked:before {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 0;
            vertical-align: bottom;
        }

        .btn {
            display: inline-block;
            font-size: 18px;
            background-color: #4caf50;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:active {
            background-color: #8bc34a;
        }

    </style>
</head>
<body>

<div id="app" v-cloak>
    <div class="stu-info" >
        <div class="item">
            姓名: {{stuName}}
        </div>
        <div class="item">
            选择题: {{choiceScore}}
        </div>
        <div class="item">
            简答题: {{shortScore}}
        </div>
        <div class="item">
            编程题: {{programmingScore}}
        </div>
        <div class="item">
            总分: {{totalScore}}
        </div>
        <div>
            <div class="btn" @click="doUpdateScore" >提交</div>
        </div>
    </div>

    <div v-for="(q,index) in choiceList">
        <div class="question">
            <div class="description" >
                <div>
                    <span class="q-title">题目描述:</span>
                </div>
                <pre class="q-txt" v-text="q.description" ></pre>
            </div>
            <div class="answer">
                <div class="a-tip">
                    <span class="a-title">题目选项:</span>
                    <span class="stu-answer" >我的答案: </span>
                    <span class="correct-answer" >正确答案: </span>
                    <span class="stu-score">得分: {{q.stuScore}}</span>
                </div>
                <div class="a-list" >
                    <div v-for="(opt,index) in q.optionList" :class=" 'a-item' + ( q.answer.indexOf(opt.key) >= 0 ?' bg-correct':'') " >
                        <span :class=" 'checkbox-' + ( q.stuAnswer.indexOf(opt.key) >= 0 ? 'checked' : 'unchecked' ) " ></span>
                        <span>{{opt.key}}: </span>
                        <span>{{opt.value}}</span>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>

    <div v-for="(q,index) in otherList">
        <div class="question">
            <div class="description" >
                <div>
                    <span class="q-title">题目描述:</span>
                </div>
                <pre class="q-txt" v-text="q.description" ></pre>
            </div>
            <div class="answer">
                <div class="a-tip">
                    <span class="a-title" >我的答案: </span>
                    <span class="a-title" @click=" q.show = !q.show " >参考答案: </span>

                    <span class="stu-score">
                        <span style="vertical-align: middle; margin-right: 5px">总分: {{q.score/10}}</span>
                        <input type="number" class="stu-score" v-model="q.stuScore" @input="checkScore(q)" style="width: 45px;" step="0.5">
                    </span>
                </div>
                <pre class="q-txt" v-if="q.show" v-text="q.answer" ></pre>
                <pre class="q-txt" v-text="q.stuAnswer" ></pre>
            </div>
        </div>
        <hr v-if=" index < otherList.length - 1" >
        <!-- <div v-else style="height: 10px" ></div> -->
    </div>

</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            stuName: '汤姆猫',
            choiceScore: 0,
            shortScore: 0,
            programmingScore: 0,
            choiceList: [], // 选择题
            otherList: [] // 简答题、编程题
        },
        beforeMount() {
            let search = location.search;
            if(search.startsWith("?")) {
                search = search.substr(1);// 获取请求参数

                // // 取指定参数
                // let pos = search.indexOf("stuName=");
                // let pos2 = search.indexOf("&", pos);
                // let str = search.substring(pos, (pos2 < 0 ? undefined : pos2));
                // let arr = str.split("=");
                // this.stuName = decodeURI(arr[1]);// 获取请求参数值
            }
            this.search = search;

            this.doLoadExamPaperDetails();
        },
        computed: {
            totalScore() {
                this.shortScore = 0;
                this.programmingScore = 0;
                for(let index in this.otherList) {
                    let qt = this.otherList[index];
                    switch (qt.typeId) {
                        case 2:// 简答题
                            this.shortScore += qt.stuScore;
                            break;
                        case 3:// 编程题
                            this.programmingScore += qt.stuScore;
                            break;
                    }
                }
                return this.choiceScore + this.shortScore + this.programmingScore;
            }
        },
        methods: {
            doLoadExamPaperDetails() {
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/previewExam",
                    data: this.search,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        toastr[success ? "success":"warning"](msg);
                        if(success) {
                            //console.log('previewExam:', data);
                            this.stuName = data.stu.name;

                            let qtArr = data.questions;
                            qtArr.sort((a,b) => a.id - b.id);
                            let stuAnswers = data.stuExamAnswers;
                            stuAnswers.sort((a,b) => a.questionId - b.questionId);
                            let shortArr = [];
                            let programmingArr = [];
                            for(let index in qtArr) {
                                let qt = qtArr[index];
                                let an = stuAnswers[index];
                                qt.answerId = an.id;// 学生答案id
                                qt.stuAnswer = an.answer;
                                qt.stuScore = an.score/10;// 保存的没有小数分

                                switch (qt.typeId) {
                                    case 1:// 选择题
                                        this.choiceScore += qt.stuScore;
                                        qt.optionList = JSON.parse(qt.optionList);
                                        this.choiceList.push(qt);
                                        break;
                                    case 2:// 简答题
                                        this.shortScore += qt.stuScore;
                                        qt.show = false;
                                        // this.otherList.push(qt);
                                        shortArr.push(qt);
                                        break;
                                    case 3:// 编程题
                                        this.programmingScore += qt.stuScore;
                                        qt.show = false;
                                        // this.otherList.push(qt);
                                        programmingArr.push(qt);
                                        break;
                                }
                            }

                            this.otherList.push(...shortArr);
                            this.otherList.push(...programmingArr);
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            checkScore(qt) {
                if(qt.stuScore*10 >= qt.score){
                    qt.stuScore = qt.score/10;
                    return;
                }
                if(qt.stuScore < 0) {
                    qt.stuScore = 0;
                }
                qt.stuScore *= 1;
            },
            doUpdateScore() {
                let stuScoreArr = this.getStuScores();
                //console.log('getStuScores:', stuScoreArr);
                let content = JSON.stringify(stuScoreArr);
                let param = this.search + "&totalScore=" + (this.totalScore*10) +"&content=" + content;
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/paper/updateStuExamScore",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        toastr[success ? "success":"warning"](msg);
                        //if(success) { }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            getStuScores() {
                // 返回 学生答案 的 打分
                let arr = [];
                // 选择题, 已自动批改, 不需要
                // 简答题+编程题
                for(let index in this.otherList) {
                    let an = this.otherList[index];
                    arr.push({
                        id: an.answerId,
                        questionId: an.id,
                        score: an.stuScore*10
                    });
                }
                return arr;
            }
        }
    });
</script>
</body>
</html>